<template>
  <div class="createPost-container">
    <el-form ref="postForm" :model="postForm" :rules="rules" class="form-container">
      <div class="createPost-main-container">
        <el-row :span="24">
          <warning />
        </el-row>

        <!--商品分类-->
        <el-row :span="24">
          <el-col :span="24">
            <div class="postInfo-container">
              <el-row>
                <category />
              </el-row>
              <el-row :span="16">
                <el-form-item label-width="80px" label="商品标题">
                  <el-input v-model="postForm.title" />
                </el-form-item>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label-width="80px" label="顶级分类">
                    <el-select v-model="postForm.top_parent_id" @change="getParent($event, 'topParent')">
                      <el-option v-for="(item, idx) in parentArr" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col :span="8">
                  <el-form-item label-width="80px" label="二级分类">
                    <el-select v-model="postForm.sub_parent_id" @change="getParent($event, 'subParent')">
                      <el-option v-for="(item, idx) in subParentArr" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>

                <el-col v-if="existsLeafCategory === true" :span="8">
                  <el-form-item label-width="80px" label="叶级分类">
                    <el-select v-model="postForm.leaf_parent_id" placeholder="叶级分类" clearable style="width: 220px; margin: 5px 0 5px 0;" class="filter-item">
                      <el-option v-for="item in leafParentArr" :key="item.id" :label="item.name" :value="item.id" />
                    </el-select>
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <!--平台售价-->
        <el-row :span="24">
          <div class="postInfo-container">
            <el-row>
              <platform-price />
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item label-width="80px" label="平台售价">
                  <el-input v-model="postForm.platform_price" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="80px" label="兑换积分">
                  <el-input v-model="postForm.integral" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="80px" label="允许兑换">
                  <el-select v-model="postForm.redemption" class="filter-item" placeholder="请选择状态">
                    <el-option label="禁止" value="0" />
                    <el-option label="允许" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="80px" label="状态">
                  <el-select v-model="postForm.stats" class="filter-item" placeholder="请选择状态">
                    <el-option label="下架" value="0" />
                    <el-option label="上架" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="100px" label="推荐到首页">
                  <el-select v-model="postForm.recommennd" class="filter-item" placeholder="请选择状态">
                    <el-option label="不推荐" value="0" />
                    <el-option label="推荐" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label-width="100px" label="是否机器拼单">
                  <el-select v-model="postForm.is_booking" class="filter-item" placeholder="请选择状态">
                    <el-option label="否" value="0" />
                    <el-option label="是" value="1" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label-width="240px" label="拼团会员所得金豆比例(单位: %)">
                  <el-input v-model="postForm.rebate_integral" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="240px" label="上级会员所得金豆比例(单位: %)">
                  <el-input v-model="postForm.parent_rebate_integral" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label-width="240px" label="上上级会员所得金豆比例(单位: %)">
                  <el-input v-model="postForm.sub_rebate_integral" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-row>

        <el-row :span="24">
          <el-row :span="24">
            <statistics />
          </el-row>
          <el-row>
            <el-col :span="6">
              <el-form-item label-width="80px" label="点击量">
                <el-input v-model="postForm.fake_clicks" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="80px" label="曝光量">
                <el-input v-model="postForm.fake_views" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="80px" label="销量">
                <el-input v-model="postForm.fake_platform_sales" />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label-width="80px" label="收藏数">
                <el-input v-model="postForm.fake_favours" />
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>

        <!--商品价格-->
        <el-row :span="24" :gutter="5">
          <el-col :span="12">
            <div class="postInfo-container">
              <el-row :span="24">
                <price />
              </el-row>
              <el-row :span="24">
                <el-col :span="24">
                  <el-form-item label-width="90px" label="超买价">
                    <el-input v-model="postForm.promotion_price" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="90px" label="渠道专属价">
                    <el-input v-model="postForm.channel_price" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="90px" label="分销基准价">
                    <el-input v-model="postForm.consign_price" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="90px" label="CPS建议价">
                    <el-input v-model="postForm.cps_suggest_price" disabled />
                  </el-form-item>
                </el-col>
              </el-row>
            </div>
          </el-col>

          <el-col :span="12">
            <div class="postInfo-container">
              <el-row>
                <priceRange />
              </el-row>
              <div v-for="(price_range, idx) in postForm.price_ranges" :key="idx">
                <el-row>
                  <el-col :span="12">
                    <el-form-item label-width="80px" label="购买数量">
                      <el-input v-model="price_range.startQuantity" disabled />
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label-width="80px" label="价格">
                      <el-input v-model="price_range.price" disabled />
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
            </div>
          </el-col>
        </el-row>

        <!--商品sku图片、价格、属性名称、库存-->
<!--        <el-row :span="24">-->
<!--          <el-row :span="24">-->
<!--            <sku />-->
<!--          </el-row>-->
<!--          <div v-for="(sku, idx) in postForm.sku" :key="idx" class="postInfo-container">-->
<!--            <el-row :span="24">-->
<!--              <el-col :span="12">-->
<!--                <el-row :span="24">-->
<!--                  <el-form-item label-width="60px" label="缩略图">-->
<!--                    <el-upload-->
<!--                      action="/common/common/common/upload"-->
<!--                      list-type="picture-card"-->
<!--                      accept=".jpg,.jpeg,.png,.gif"-->
<!--                      :multiple="false"-->
<!--                      :limit="1"-->
<!--                      :data="skuImageObjArr[idx]"-->
<!--                      :on-preview="handleSkuImgPictureCardPreview"-->
<!--                      :file-list="skuImageUrl[idx]"-->
<!--                      :on-remove="handleSkuImgRemove"-->
<!--                      :before-remove="(file, fileList) => {-->
<!--                        return handleSkuImgBeforeRemove(file, fileList, idx)-->
<!--                      }"-->
<!--                      :on-success="(response, file, fileList) => {-->
<!--                        return handleSkuImgUploadResult(response, file, fileList, idx)-->
<!--                      }"-->
<!--                      :on-error="handleUploadError"-->
<!--                    >-->
<!--                      <i class="el-icon-plus" />-->
<!--                    </el-upload>-->
<!--                    <el-input v-model="sku.sku_image_url" type="hidden" />-->
<!--                    <el-dialog :visible.sync="dialogSkuImageVisible" size="tiny">-->
<!--                      <img width="100%" :src="dialogSkuImageUrl" alt="">-->
<!--                    </el-dialog>-->
<!--                  </el-form-item>-->
<!--                </el-row>-->
<!--              </el-col>-->
<!--              <el-col :span="12">-->
<!--                <el-row :span="24">-->
<!--                  <el-form-item label-width="120px" label="属性">-->
<!--                    <el-input v-model="sku.attributes_value" disabled />-->
<!--                  </el-form-item>-->
<!--                </el-row>-->
<!--                <el-row :span="24">-->
<!--                  <el-form-item label-width="120px" label="库存">-->
<!--                    <el-input v-model="sku.amount_on_sale" disabled />-->
<!--                  </el-form-item>-->
<!--                </el-row>-->
<!--                <el-row :span="24">-->
<!--                  <el-form-item label-width="120px" label="sku建议零售价">-->
<!--                    <el-input v-model="sku.retail_price" disabled />-->
<!--                  </el-form-item>-->
<!--                </el-row>-->
<!--                <el-row :span="24">-->
<!--                  <el-form-item label-width="120px" label="分销基准价">-->
<!--                    <el-input v-model="sku.consign_price" disabled />-->
<!--                  </el-form-item>-->
<!--                </el-row>-->
<!--              </el-col>-->
<!--            </el-row>-->
<!--          </div>-->
<!--        </el-row>-->

        <!--商品主图、主视频、图集-->
        <el-row :span="24">
          <el-row :span="24">
            <images />
          </el-row>
          <div class="postInfo-container">
            <el-row :span="24">
              <el-form-item label-width="80px" label="商品主图">
                <el-upload
                  action="/common/common/common/upload"
                  list-type="picture-card"
                  accept=".jpg,.jpeg,.png,.gif"
                  :multiple="false"
                  :limit="1"
                  :data="mainImageObj"
                  :on-preview="handleProductMainPictureCardPreview"
                  :file-list="mainImageArr"
                  :on-remove="handleProductMainPicRemove"
                  :before-remove="handleProductMainPicBeforeRemove"
                  :on-success="handleProductMainPicUploadResult"
                  :on-error="handleUploadError"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-input v-model="postForm.img_url" type="hidden" />
                <el-dialog :visible.sync="dialogMainImageVisible" size="tiny">
                  <img width="100%" :src="dialogMainImageUrl" alt="">
                </el-dialog>
              </el-form-item>
            </el-row>
            <el-row :span="24">
              <el-form-item label-width="80px" label="商品图集">
                <el-upload
                  action="/common/common/common/upload"
                  list-type="picture-card"
                  accept=".jpg,.jpeg,.png,.gif"
                  :multiple="false"
                  :data="productImagesObj"
                  :on-preview="handleProductImagesCardPreview"
                  :file-list="productImagesArr"
                  :on-remove="handleProductImagesRemove"
                  :on-success="handleProductImagesUploadResult"
                  :on-error="handleUploadError"
                >
                  <i class="el-icon-plus" />
                </el-upload>
                <el-input v-model="postForm.img_url" type="hidden" />
                <el-dialog :visible.sync="dialogProductImagesVisible" size="tiny">
                  <img width="100%" :src="dialogProductImagesUrl" alt="">
                </el-dialog>
              </el-form-item>
            </el-row>
          </div>
        </el-row>

        <!--商品主图、主视频、图集-->
<!--        <el-row :span="24">-->
<!--          <el-row :span="24">-->
<!--            <productInfo />-->
<!--          </el-row>-->
<!--        </el-row>-->
        <el-row>
          <el-button style="margin-left: 10px;" type="success" @click="submitForm">
            提交
          </el-button>
        </el-row>
      </div>
    </el-form>
  </div>
</template>

<script>
import { getInfo, deleteImage, editAlibabaProduct } from '@/api/alibabaProduct'
import { getList as getCategory } from '@/api/alibabaCategory'
import warning from '@/components/AlibabaProduct/warning'
import category from '@/components/AlibabaProduct/category'
import images from '@/components/AlibabaProduct/images'
import sku from '@/components/AlibabaProduct/sku'
import price from '@/components/AlibabaProduct/price'
import priceRange from '@/components/AlibabaProduct/priceRange'
import platformPrice from '@/components/AlibabaProduct/platformPrice'
import productInfo from '@/components/AlibabaProduct/productInfo'
import statistics from '@/components/AlibabaProduct/statistics'

const defaultForm = {
  product_id: '',
  category_id: '',
  title: '',
  price: '',
  promotion_price: '',
  img_url: '',
  main_video: '',
  images: '',
  channel_price: '',
  sales: '',
  reference_price: '',
  supplier_login_id: '',
  alibaba_stats: '',
  stats: '',
  redemption: '',
  integral: '',
  quality_level: '',
  support_online_trade: '',
  mix_whole_sale: '',
  price_auth: '',
  price_ranges: [],
  amount_on_sale: '',
  unit: '',
  min_order_quantity: '',
  batch_number: '',
  quote_type: '',
  consign_price: '',
  cps_suggest_price: '',
  platform_price: '',
  recommennd: '',
  is_booking:'',
  created_at: '',
  updated_at: '',
  top_parent_id: '',
  top_parent_name: '',
  sub_parent_id: '',
  sub_parent_name: '',
  leaf_parent_id: '',
  leaf_parent_name: '',
  sku: [],
  fake_clicks: 0,
  fake_views: 0,
  fake_platform_sales: 0,
  fake_favours: 0,
  rebate_integral: 0,
  parent_rebate_integral: 0,
  sub_rebate_integral: 0
}
export default {
  name: 'ProductInfo',
  components: { warning, category, sku, images, price, priceRange, platformPrice, productInfo, statistics },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: Object.assign({}, defaultForm),
      loading: false,
      userListOptions: [],
      tempRoute: {},
      id: this.$route.query.id,
      rules: {},
      parentArr: {},
      subParentArr: {},
      leafParentArr: {},
      existsLeafCategory: false,
      // sku图片
      dialogSkuImageUrl: '',
      dialogSkuImageVisible: false,
      // sku图片FileList
      skuImageUrl: [],
      // sku图片上传所需参数
      skuImageObjArr: [],
      // 商品主图FileList
      mainImageArr: [],
      // 商品主图上传所需参数
      mainImageObj: {},
      dialogMainImageUrl: '',
      dialogMainImageVisible: false,
      // 商品主视频FileList
      mainVideoArr: [],
      // 商品主图上传所需参数
      mainVideoObj: {},
      dialogMainVideoUrl: '',
      dialogMainVideoVisible: false,
      // 商品图集
      productImagesObj: {},
      productImagesArr: [],
      dialogProductImagesUrl: '',
      dialogProductImagesVisible: false
    }
  },
  computed: {
    contentShortLength() {
      // return this.postForm.content_short.length
      return this.postForm.top_parent_id
    },
    created_at: {
      // set and get is useful when the data
      // returned by the back end api is different from the front end
      // back end return => "2013-06-25 06:59:25"
      // front end need timestamp => 1372114765000
      get() {
        return (+new Date(this.postForm.created_at))
      },
      set(val) {
        this.postForm.created_at = new Date(val)
      }
    }
  },
  watch: {
    leafParentArr: {
      handler(newData, oldData) {
        if (newData.length === 0) {
          this.existsLeafCategory = false
        } else {
          this.existsLeafCategory = true
        }
      }
    },
    postForm: {
      handler(newData, oldData) {
        this.getParent(newData.top_parent_id, 'topParent')
        if (newData.leaf_parent_id) {
          this.getParent(newData.sub_parent_id, 'subParent')
        }
        this.existsLeafCategory = true
      },
      immediate: true,
      deep: true
    }
  },
  created() {
    const id = this.$route.query && this.$route.query.id
    this.fetchData(id)
    this.getParent()
    // Why need to make a copy of this.$route here?
    // Because if you enter this page and quickly switch tag, may be in the execution of the setTagsViewTitle function, this.$route is no longer pointing to the current page
    // https://github.com/PanJiaChen/vue-element-admin/issues/1221
    this.tempRoute = Object.assign({}, this.$route)
  },
  methods: {
    // 图片上传失败
    handleUploadError(err, file, fileList) {
      const resp = JSON.parse(err.message)
      this.$notify({
        title: '图片上传失败',
        type: 'error',
        message: resp.errmsg,
        duration: 2000
      })
    },
    handleProductMainVideoCardPreview(file) {
      this.dialogMainVideoUrl = file.url
      this.dialogMainVideoVisible = true
    },
    handleProductMainVideoRemove(file, fileList) {
      console.log('handleProductMainRemove')

      const param = {
        url: this.postForm.main_video,
        type: 'product_main_video',
        product_id: this.postForm.product_id
      }
      deleteImage(param).then(() => {
        this.$notify({
          title: '图片删除成功',
          type: 'success',
          message: '图片删除成功',
          duration: 2000
        })
      }).catch(error => {
        this.$notify({
          title: '图片删除失败',
          type: 'error',
          message: error.errmsg,
          duration: 2000
        })
      })
    },
    handleProductMainVideoBeforeRemove(file, fileList) {
      this.postForm.img_url = ''
    },
    handleProductMainVideoUploadResult(response, file, fileList) {
      this.postForm.main_video = response.result.data.file
    },
    handleProductImagesUploadResult(response, file, fileList) {
      this.postForm.images += ',' + response.result.data.file
      this.productImagesArr.push({
        name: response.result.data.file,
        url: response.result.data.file
      })
    },
    handleProductImagesBeforeRemove(file, fileList) {
      // this.postForm.img_url = ''
      // console.log('handleProductImagesBeforeRemove')
      // console.log(file)
      // console.log(fileList)
    },
    handleProductImagesRemove(file, fileList) {
      console.log('handleProductImagesRemove')

      const param = {
        url: file.url,
        type: 'product_images',
        product_id: this.postForm.product_id
      }
      deleteImage(param).then(() => {
        if (this.postForm.images.indexOf(file.url) !== -1) {
          console.log(this.productImagesArr)
          console.log(this.postForm.images)

          this.postForm.images = this.postForm.images.replace(file.url, '')

          for (let i = 0; i < this.productImagesArr.length; i++) {
            console.log(this.productImagesArr[i].url)
            console.log(file.url)
            if (this.productImagesArr[i].url === file.url) {
              this.productImagesArr.splice(i, 1)
            }
          }

          console.log(this.productImagesArr)
          console.log(this.postForm.images)
        }
        this.$notify({
          title: '图片删除成功',
          type: 'success',
          message: '图片删除成功',
          duration: 2000
        })
      }).catch(error => {
        this.$notify({
          title: '图片删除失败',
          type: 'error',
          message: error.errmsg,
          duration: 2000
        })
      })
    },
    handleProductImagesCardPreview(file) {
      this.dialogMainImageUrl = file.url
      this.dialogMainImageVisible = true
    },
    // 商品主图预览
    handleProductMainPictureCardPreview(file) {
      this.dialogMainImageUrl = file.url
      this.dialogMainImageVisible = true
    },
    handleProductMainPicRemove(file, fileList) {
      console.log('handleProductMainRemove')

      const param = {
        url: this.postForm.img_url,
        type: 'product_main_image',
        product_id: this.postForm.product_id
      }
      deleteImage(param).then(() => {
        this.$notify({
          title: '图片删除成功',
          type: 'success',
          message: '图片删除成功',
          duration: 2000
        })
      }).catch(error => {
        this.$notify({
          title: '图片删除失败',
          type: 'error',
          message: error.errmsg,
          duration: 2000
        })
      })
    },
    // 删除商品主图
    handleProductMainPicBeforeRemove(file, fileList) {
      this.postForm.img_url = ''
    },
    // 上传商品主图
    handleProductMainPicUploadResult(response, file, fileList) {
      console.log(response.result.data.file)
      this.postForm.img_url = response.result.data.file
      console.log(this.postForm)
    },
    // 上传sku图片
    handleSkuImgUploadResult(response, file, fileList, idx) {
      this.$notify({
        title: '图片上传成功',
        type: 'success',
        message: '图片上传成功',
        duration: 2000
      })
      this.postForm.sku[idx].sku_image_url = response.result.data.file
    },
    handleSkuImgBeforeRemove(file, fileList, idx) {
      file.url = this.postForm.sku[idx].sku_image_url
    },
    // 删除sku图片
    handleSkuImgRemove(file, fileList) {
      const param = {
        url: file.url,
        type: 'sku',
        product_id: this.postForm.product_id
      }
      deleteImage(param).then(() => {
        this.$notify({
          title: '图片删除成功',
          type: 'success',
          message: '图片删除成功',
          duration: 2000
        })
      }).catch(error => {
        this.$notify({
          title: '图片删除失败',
          type: 'error',
          message: error.errmsg,
          duration: 2000
        })
      })
    },
    handleSkuImgPictureCardPreview(file) {
      console.log('handlePictureCardPreview')
      this.dialogSkuImageUrl = file.url
      this.dialogSkuImageVisible = true
    },
    getParent(parent, vc) {
      let isLeaf = false
      const param = {
        sort: 'asc',
        order: 'id',
        page: 1,
        page_size: 9999
      }
      if (parent) {
        param.parent = parent
        if (vc === 'subParent' && this.subParentArr.length !== undefined) {
          this.subParentArr.map((item, idx) => {
            if (item.id === parent && item.publishing === '1') {
              isLeaf = true
              this.leafParentArr = []
            }
          })
        }
      } else {
        param.parent = 0
      }
      if (isLeaf === false) {
        getCategory(param).then(response => {
          const { data, meta } = response
          console.log(meta)
          if (param.parent === 0) {
            this.parentArr = data.map((item, idx) => {
              return { id: item.id, name: item.name, publishing: item.publishing }
            })
          } else {
            if (vc === 'topParent') {
              this.subParentArr = data.map((item, idx) => {
                return { id: item.id, name: item.name, publishing: item.publishing }
              })
            } else {
              this.leafParentArr = data.map((item, idx) => {
                return { id: item.id, name: item.name, publishing: item.publishing }
              })
            }
          }
        }).catch(() => {
          this.parentArr = []
        })
      }
    },
    fetchData(id) {
      getInfo(id).then(response => {
        this.postForm = response.data
        console.log(response.data)
        if (this.postForm.price_ranges !== '') {
          this.postForm.price_ranges = JSON.parse(this.postForm.price_ranges)
        }
        console.log(this.postForm.price_ranges)

        this.mainImageArr.push({
          name: response.data.title,
          url: response.data.img_url,
          product_id: response.data.product_id
        })

        this.mainImageObj = {
          productId: response.data.product_id,
          type: 'product_main_image'
        }

        this.mainVideoArr.push({
          name: response.data.main_video,
          url: response.data.main_video,
          product_id: response.data.product_id
        })

        this.mainVideoObj = {
          productId: response.data.product_id,
          type: 'product_main_video'
        }

        const product_images = response.data.images.split(',')

        if (product_images.length > 0) {
          this.productImagesObj = {
            product_id: response.data.product_id,
            type: 'product_images'
          }
          console.log(this.productImagesObj)

          for (let i = 0; i < product_images.length; i++) {
            this.productImagesArr.push({
              name: product_images[i],
              url: product_images[i]
            })
          }
        }

        if (response.data.sku) {
          for (let i = 0; i < response.data.sku.length; i++) {
            this.skuImageUrl.push([{
              name: response.data.sku[i].sku_id,
              url: response.data.sku[i].sku_image_url
            }])

            this.skuImageObjArr.push({
              index: i,
              skuId: response.data.sku[i].sku_id,
              productId: response.data.product_id,
              type: 'sku'
            })
          }
        }
      }).catch(err => {
        console.log(err)
      })
    },
    setTagsViewTitle() {
      const title = 'Edit Article'
      const route = Object.assign({}, this.tempRoute, { title: `${title}-${this.postForm.id}` })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    setPageTitle() {
      const title = 'Edit Article'
      document.title = `${title} - ${this.postForm.id}`
    },
    submitForm() {
      this.$refs.postForm.validate(valid => {
        if (valid) {
          console.log(this.postForm)
          this.loading = true

          editAlibabaProduct(this.postForm).then(resp => {
            console.log(resp)
            this.$notify({
              title: '发布成功',
              message: '产品发布成功',
              type: 'success',
              duration: 2000
            })
          }).catch(err => {
            console.log(err)
            this.$notify({
              title: '发布失败',
              message: err.errmsg,
              type: 'error',
              duration: 2000
            })
          })
          this.postForm.status = 'published'
          this.loading = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    draftForm() {
      if (this.postForm.content.length === 0 || this.postForm.title.length === 0) {
        this.$message({
          message: '请填写必要的标题和内容',
          type: 'warning'
        })
        return
      }
      this.$message({
        message: '保存成功',
        type: 'success',
        showClose: true,
        duration: 1000
      })
      this.postForm.status = 'draft'
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~@/styles/mixin.scss";
  .createPost-container {
    position: relative;
    .createPost-main-container {
      padding: 40px 45px 20px 50px;
      .postInfo-container {
        position: relative;
        @include clearfix;
        margin-bottom: 10px;
        .postInfo-container-item {
          float: left;
        }
      }
    }
    .word-counter {
      width: 40px;
      position: absolute;
      right: 10px;
      top: 0px;
    }
  }
  .article-textarea /deep/ {
    textarea {
      padding-right: 40px;
      resize: none;
      border: none;
      border-radius: 0px;
      border-bottom: 1px solid #bfcbd9;
    }
  }
</style>
